<template>
  <el-row>
    <el-col :span="22" :offset="1">

      <!--卡片shart-->
      <el-card class="box-card" style="padding: 0 15px;">

        <!--***页面-->
        <el-row :gutter="0">
          <el-col :span="2" :offset="22" style="height:40px;line-height:40px;">
            <el-button type="success" @click="insertFun">新增</el-button>
          </el-col>
        </el-row>

        <el-row style="width:100%;line-height: 40px;margin-top:30px;border: 1px solid white">
          <!--处方类别-->
          <el-col :span="4" :offset="0" style="">
            <span style="font-size: 15px;margin-right: 5px;">处方类别</span>
            <el-select v-model="departmentValue" placeholder="请选择" style="width: 150px;">
              <el-option v-for="item in departmentOptions" :key="item.name" :label="item.label" :value="item.name">
              </el-option>
            </el-select>
          </el-col>

          <!--药品状态-->
          <el-col :span="4" :offset="0" style="margin-left:20px;border: 1px solid white;">
            <span style="font-size: 15px;margin-right: 5px;">药品状态</span>
            <el-select v-model="doctorSelect" placeholder="请选择" style="width: 150px;">
              <el-option v-for="item in doctorOptions" :key="item.name" :label="item.label" :value="item.name">
              </el-option>
            </el-select>
          </el-col>

          <!--创建时间-->
          <el-col :span="4" :offset="0" style="margin-left:20px;border: 1px solid white;width: 440px;">
            <span style="font-size: 15px;margin-right: 5px;">创建时间</span>
            <el-date-picker v-model="clinictimeSelect" type="daterange" align="right"
                            unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="clinictimeOptions" style="">
            </el-date-picker>
          </el-col>

          <!--查询框-->
          <el-col :span="7" :offset="0" style="margin-left:20px;">
            <el-input placeholder="输入药品名称/编码/生产厂家" v-model="searchValue" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="querySubmit"></el-button>
            </el-input>
          </el-col>

        </el-row>


        <el-row>
          <el-col :span="24" :offset="0" style="margin-top:20px;border: 1px solid white">

            <el-table :data="tableData" :header-cell-style="{lineHeight:'20px'}"
                      stripe style="width: 100%">
              <el-table-column type="index" width="180" label="序号"></el-table-column>
              <el-table-column prop="drugId" label="药品编码" width="180"> </el-table-column>
              <el-table-column prop="name" label="药品名称"> </el-table-column>
              <el-table-column prop="specification" label="药品规格"> </el-table-column>
              <el-table-column prop="kind" label="处方类别"> </el-table-column>
              <el-table-column prop="purchasePrice" label="采购价"> </el-table-column>
              <el-table-column prop="retailPrice" label="售药价"> </el-table-column>
              <el-table-column prop="manufacturer" label="生产厂家"> </el-table-column>

              <el-table-column prop="address" label="创建时间"> </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button type="text" size="small"@click="update(scope.row.drugId)">编辑</el-button>

                  <el-button type="text" size="small" @click="handleClick(scope.row.drugId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>


            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.params.page"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="this.params.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
              </el-pagination>
            </div>

          </el-col>

        </el-row>

      </el-card>
      <!--卡片end-->

    </el-col>
  </el-row>
</template>

<script>
  import axios from 'axios';
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: [],
        total:50,
        params:{
          size:5,
          page:1
        },
        labelPosition: 'top',



        departmentValue: '',
        departmentOptions: [{
          name: '选项1',
          label: '全部'
        }, {
          name: '选项2',
          label: '西/成药'
        }, {
          name: '选项3',
          label: '中药'
        }],

        doctorSelect: '',
        doctorOptions: [{
          name: '选项1',
          label: '全部'
        }, {
          name: '选项2',
          label: '启用'
        }, {
          name: '选项3',
          label: '停用'
        }],

        //时间
        clinictimeSelect: '',
        clinictimeOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近两周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 21);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近两个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }]
        },


      }
    },
    methods: {
      handleClick:function(drugId){
        alert(drugId);
        axios.post("api/druginfo/delete",{drugId:drugId}).then(res=>{
          if(res.data=="success"){

          this.findAll();
          }
        })
      },
      onSubmit() {
        alert("保存成功")
        console.log('submit!');
      },
      /*back:function () {
        this.$router.push("/")
      },*/
      insertFun() {
        this.$router.push("/drugInfoInsert")
      },
      findAll:function () {
        axios.get("api/druginfo/findAll/"+this.params.page+"/"+this.params.size).then(res=>{

          this.tableData=res.data.list;
          this.total=res.date.total;
        })
      },
      /*分页*/
      handleSizeChange(val) {
        this.params.size=val;
        this.findAll();
      },
      handleCurrentChange(val) {
        this.params.page=val;
        this.findAll();
      }
    },
    mounted(){
      this.findAll();
    }
  }
</script>
<style scoped>
  .width270Height40{
    width: 270px;line-height:40px;float:left;margin-right:40px;
  }
</style>
